<template>
  <div class="demo-app">
    <el-row style="margin-top: 20px;">
      <el-button-group>
        <el-button :loading="up" @click="lastWeek" type="primary" icon="el-icon-arrow-left">上一周</el-button>
        <el-button
          :hidden="now >= now2"
          :loading="down"
          @click="nextWeek"
          type="primary"
          icon="el-icon-arrow-right el-icon--right"
        >下一周</el-button>
      </el-button-group>
    </el-row>
    <el-table
      border
      style="width: 100%;margin-top: 20px;"
      v-loading="loading"
      element-loading-text="加载中..."
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      :data="tableData"
    >
      <template v-slot:empty>
        <el-empty description="暂无数据"></el-empty>
      </template>
      <el-table-column align="center" label="日期" width="180">
        <template slot-scope="scope">
          <font
            :style="scope.row.isAllowEdit == 1?'font-size: 20px;color: blue;':'font-size: 20px;color: red;'"
          >
            <i class="el-icon-date">
              <b>{{scope.row.workDate}}</b>
            </i>
          </font>
          <span :hidden="scope.row.workDate != now3">
            <br />
            <font style="size: 15;padding-left: 50px;color: deepskyblue;font-size: 17px;">
              <b>(今天)</b>
            </font>
          </span>
          <span>
            <br />
            <font
              style="padding-left: 40px;font-size: 16px;color: green;"
            >星期{{"日一二三四五六".charAt(new Date(scope.row.workDate).getDay())}}</font>
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="所属项目" width="200">
        <template slot-scope="scope">
          <el-select
            @change="selectProject(scope.row)"
            :disabled="scope.row.isAllowEdit == 0"
            v-model="scope.row.projectId"
            filterable
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in projectData"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column align="center" label="工作类型" width="150">
        <template slot-scope="scope">
          <el-select
            :disabled="scope.row.isAllowEdit == 0"
            v-model="scope.row.workType"
            filterable
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in workTypeDate"
              :key="item.code"
              :label="item.text"
              :value="item.code"
            ></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column align="center" label="工作小时数" width="150">
        <template slot-scope="scope">
          <el-input
            :disabled="scope.row.isAllowEdit == 0"
            :clearable="true"
            v-model.number="scope.row.workHours"
            placeholder="请输入"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column align="center" label="工作内容">
        <template slot-scope="scope">
          <el-input
            :disabled="scope.row.isAllowEdit == 0"
            type="textarea"
            :autosize="{ minRows: 3, maxRows: 6}"
            placeholder="请输入内容"
            v-model="scope.row.workTask"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="planWorkType"
        label="工作事项"
        width="150"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        align="center"
        prop="planTask"
        label="工作安排"
        width="200"
        show-overflow-tooltip
      ></el-table-column>
    </el-table>
    <el-row style="margin-top: 20px;">
      <el-col :offset="11" :span="2">
        <el-button :loading="substr" icon="el-icon-top" @click="submit" type="primary" round>提交</el-button>
      </el-col>
    </el-row>
    <el-divider>
      <i class="el-icon-s-open"></i>已审批的不能修改,每天的工作时长总和不能超过7.5.每行数据完整才会被保存喔！
    </el-divider>
  </div>
</template>
<script>
import _ from "lodash";
import request from "@/utils/request";
export default {
  components: {},
  created: function () {
    this.getData(this.now);
    this.getSelectData();
  },
  data: function () {
    return {
      loading: false,
      //当前时间,作为分页的条件
      now: new Date(),
      //区分
      now2: new Date(),
      now3: formatter.formatDate(new Date()),
      //下拉选择项目
      projectData: null,
      //下拉工作类型
      workTypeDate: null,
      //表格数据
      tableData: null,
      //按钮状态
      up: false,
      down: false,
      substr: false,
    };
  },
  methods: {
    selectProject(row) {
      request({
        url: "/eip/projectWorkload/getPlan",
        method: "get",
        params: {
          projectWorkload: {
            projectId: row.projectId,
            workDate: row.workDate,
          },
        },
      })
        .then((r) => {
          if (r.success) {
            row.planTask = r.parameters.plan.planTask;
            row.planWorkType = r.parameters.plan.workType;
          } else {
            row.planTask = null;
            row.planWorkType = null;
          }
        })
        .catch((e) => {
          reject(e);
        });
    },
    //获取下拉资源
    getSelectData() {
      request({
        url: "/eip/projectWorkload/getSelect",
        method: "get",
        params: {},
      })
        .then((r) => {
          if (r && !r.initMessage) {
            this.projectData = r.parameters.project;
          } else {
            this.$message.error(r.initMessage || "数据请求失败");
          }
        })
        .catch((e) => {
          reject(e);
        });
      request({
        url: "/admin/sysDictItem/getChild",
        method: "get",
        params: {
          typeId: "c8fa922ac2766746c7e88d736d92d10e",
          id: "root",
        },
      })
        .then((r) => {
          if (r && !r.initMessage) {
            this.workTypeDate = r;
          } else {
            this.$message.error(r.initMessage || "数据请求失败");
          }
        })
        .catch((e) => {
          reject(e);
        });
    },
    //根据当前时间获取上下周的信息
    getData(now) {
      this.loading = true;
      //格式化
      now = formatter.formatDateTime(now);
      request({
        url: "/eip/projectWorkload/getWeekWorkLoad",
        method: "get",
        params: { time: now },
      })
        .then((r) => {
          if (r && !r.initMessage) {
            this.tableData = r.parameters.workLoads;
            this.up = false;
            this.dowm = false;
            this.loading = false;
          } else {
            this.$message.error(r.initMessage || "数据请求失败");
          }
        })
        .catch((e) => {
          reject(e);
        });
    },
    lastWeek() {
      this.up = true;
      let time = this.now;
      let dateTime = time.setDate(time.getDate() - 7);
      this.now = new Date(dateTime);
      this.getData(this.now);
    },
    nextWeek() {
      this.dowm = true;
      let time = this.now;
      let dateTime = time.setDate(time.getDate() + 7);
      this.now = new Date(dateTime);
      this.getData(this.now);
    },
    submit() {
      var z = 1;
      //克隆
      var arr = _.cloneDeep(this.tableData);
      for (var j = 0; j < arr.length; ) {
        var t = _.filter(arr, { workDate: arr[j].workDate });
        var sum = 0;
        for (var y = 0, len1 = t.length; y < len1; y++) {
          var e = t[y];
          if (e.workHours <= 0) {
            this.$message({
              message: "请检查工作时长！",
              type: "info",
            });
            return;
          }
          if (
            _.isEmpty(e.projectId) ||
            _.isEmpty(e.workType) ||
            _.isEmpty(e.workTask)
          ) {
            if (
              (_.isEmpty(e.projectId) &&
                _.isEmpty(e.workType) &&
                _.isEmpty(e.workTask)) == false
            ) {
              this.$message({
                message: "所属项目或工作类型或工作内容不能为空喔！",
                type: "info",
              });
              return;
            }
          }
          if (typeof t[y].workHours != "undefined") {
            sum = sum + t[y].workHours;
          }
        }
        if (sum > 7.5) {
          z = 0;
        }
        arr.splice(j, t.length);
      }
      if (z == 0) {
        this.$message({
          message: "每天的工作时长总和不能超过7.5！请检查数据",
          type: "error",
        });
        return;
      }
      request({
        url: "/eip/projectWorkload/saveWeekWorkLoad",
        method: "post",
        data: { weekWorkload: this.tableData },
      })
        .then((r) => {
          if (r && !r.initMessage) {
            if (r.success == true) {
              this.$message({
                message: "保存成功！",
                type: "success",
              });
            } else {
              this.$message.error("保存失败！");
            }
            this.getData(this.now);
          } else {
            this.$message.error(r.initMessage || "数据请求失败");
          }
        })
        .catch((e) => {
          reject(e);
        });
    },
  },
};
</script>

<style lang='css' scoped>
</style>
 